<template>
	<view class="container">
		<view>
			<textarea  maxlength="2" placeholder="请输入编码..."  v-model="code"  confirm-type="done" @confirm="getImgDes()" class="inputStyle"/>
		</view>
		<view class="grid-item-box" style="background-color: #fff;">
				<image :src="getImage()" class="image" mode="aspectFit" @error="onImageError($event)"/>
		</view>
		<text class="text">{{getImgDes()}}</text>			
					
	</view>
</template>

<script>
	import constant from '../../utils/constant.js';
	import dic from '../../utils/dic.js';
	export default {
		data() {
			return {
				code:"",
				des:"",
				imageUrl:constant.getImageUrl(),
				
			}
		},
		methods: {
			onImageError(e) {
				this.des = "image_error";
			},
			getImage(){
				var c = this.code;
				c = c.toLowerCase();
				if(c.length==2&&c[0]==c[1]){
					c = c[0];
				}
				var url = this.imageUrl+c+'.webp'
				console.log(url);
				return url;
			},
			getImgDes(){
				var c = this.code;
				c = c.toUpperCase();
				if(c.length==1){
					c = c+c;
				}
				var imgDes = dic.getDes(c);
				return imgDes;
			}
			
		}
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		flex-direction: column;
	}
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 10rpx;
	}
	.text{
		font-size: 26rpx;
		display: flex;
		color: #000;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.image{
		width: 375rpx;
		height: 300rpx;
	}
	.inputStyle{
		display: flex;
		padding: 10rpx;
		margin: 10rpx;
		width: 710rpx;
		height: 40rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: skyblue;
		align-items: left;
		flex-direction: row;
		background-color: gainsboro;
		
	}
</style>

